<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/bootstrap.css">
  <link rel="stylesheet" href="../css/xzproducts.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <title>Document</title>
  <style></style>
</head>

<body>
  <div class="xz-products">
    <div class="container">
      <div class="row">
        <!-- 左侧部分 -->
        <div class="col-xl-9 col-12 ">
          <div class="row">
            <div class="col-12 bg-info pb-2 mb-2 mt-2">笔记本电脑</div>
          </div>
          <div class="row"> 
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
              <div class="xz-card card">
                <img src="../img/xz-img/products/57b12a31N8f4f75a3.jpeg" alt="" class="d-block w-75 m-auto">
                <div class="card-body">
                  <div class="card-title text-primary font-weight-bold">￥4999.00</div>
                  <div class="card-text">联想银色512g超薄笔记本1t硬盘
                  </div>
                  <div class="d-flex xz-shop justify-content-between">
                    <div class="clearfix">
                      <button class="float-left btn btn-secondary">-</button>
                      <input type="text" class="float-left">
                      <button class="float-left btn btn-secondary">+</button>
                    </div>
                    <button class="btn btn-primary">加入购物车</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12 bg-light mt-2">
              <ul class="pagination justify-content-end">
                <li class="page-item disabled"><a href="#" class="page-link">上一页</a></li>
                <li class="page-item active"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">5</a></li>
                <li class="page-item disabled"><a href="#" class="page-link">上一页</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 右侧边栏 -->
        <div class="col-xl-3 d-xl-block d-none">
          <div class="row">
            <div class="col-12 bg-secondary text-white pt-2 pb-2 mt-2 mb-2">通知公告</div>
            <div class="col-11 offset-1 bg-white p-2">酷酷酷酷酷酷酷酷酷酷酷酷</div>
          </div>
          <!-- 购物车 -->
          <div class="row">
            <div class="col-11 offset-1 bg-secondary text-white">
              <span class="float-left text-white pt-2 pb-2">购物车</span>
              <a href="#" class="float-right text-white pt-2 pb-2">清空</a>
            </div>
            <div class="col-11 offset-1 bg-white p-0 xz-shop-col">
              <ul class="xz-card-shop list-unstyled mb-0">
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
                <li class="d-flex justify-content-between">
                  <div>一个电脑的标题文字长一点</div>
                  <input type="number" value="1">
                  <div>￥4999.99</div>
                </li>
              </ul>
            </div>
            <div class="col-11 offset-1 bg-secondary text-white">
              <img src="../img/xz-img/products/car.png" alt="" class="float-left mt-2 mr-2">
              <span class="float-left mt-2">￥12456.78</span>
              <button class="btn btn-primary float-right rounded-0">结算</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</body>

</html>